import React from "react";

import { Button, Form, Input, Select, Switch, Table } from "antd";
import DesignerSetterModal from "../../designer/SetterModal";

export * from "./index";

export const Setter = () => {
  return (
    <div>
      <Form.Item label="列">
        <DesignerSetterModal  trigger={<Button>设置</Button>}>
          <Form.List name="columns">
            {(dataSource, { add }) => {
              return (
                <div>
                  <Table
                    columns={[
                      {
                        dataIndex: "key",
                        title: "标题",
                        render(value, record, index) {
                          return (
                            <Form.Item name={[record.name, "title"]}>
                              <Input />
                            </Form.Item>
                          );
                        },
                      },
                      {
                        dataIndex: "key",
                        title: "类型",
                        render(value, record, index) {
                          return (
                            <Form.Item name={[record.name, "valueType"]}>
                              <Select
                              allowClear
                              style={{width:80}}
                                options={[
                                  { label: "文本", value: "text" },
                                  { label: "日期", value: "date" },
                                  { label: "日期时间", value: "dateTime" },
                                  { label: "图片", value: "image" },
                                  { label: "代码框", value: "jsonCode" },
                                  { label: "索引", value: "index" },
                                ]}
                              />
                            </Form.Item>
                          );
                        },
                      },
                      {
                        dataIndex: "key",
                        title: "字段",
                        render(value, record, index) {
                          return (
                            <Form.Item name={[record.name, "dataIndex"]}>
                              <Input />
                            </Form.Item>
                          );
                        },
                      },
                      {
                        dataIndex: "search",
                        title: "搜索",
                        render(value, record, index) {
                          return (
                            <Form.Item noStyle name={[record.name, "search"]}>
                            <Switch/>
                        </Form.Item>
                          );
                        },
                      },
                     
                    ]}
                    pagination={false}
                    dataSource={dataSource}
                  />
                  <Button
                    block
                    shape="round"
                    type="dashed"
                    onClick={() => add({ title: "标题" })}
                  >
                    增加列
                  </Button>
                </div>
              );
            }}
          </Form.List>
        </DesignerSetterModal>
      </Form.Item>
      <Form.Item name='headerTitle' label="标题" >
        <Input/>
      </Form.Item>
      <Form.Item label="请求">
        <Form.Item noStyle name={["request", "url"]}>
          <Input />
        </Form.Item>
        <Form.Item noStyle name={["request", "method"]}>
          <Select
            options={[
              { value: "GET", label: "GET" },
              { value: "POST", label: "POST" },
            ]}
          />
        </Form.Item>
       
      </Form.Item>
    </div>
  );
};
